<template>
  <div id="app">

    <HelloWorld>
      <template scope={food:foods}>
        <h1>美食</h1>
        <ul>
          <li v-for="(item,index) in foods" :key=index>
            {{ item }}
          </li>
        </ul>
      </template>
    </HelloWorld>

    <HelloWorld>
      <template scope="{food:foods}">
        <h1>美食</h1>
        <ol>
          <li v-for="(item,index) in foods" :key="index">
            {{ item }}
          </li>
        </ol>
      </template>
    </HelloWorld>

    <HelloWorld>
      <template scope="food">
        <h1>美食</h1>
        <h4 v-for="(item,index) in food.food" :key="index"> {{item}}</h4>
      </template>
    </HelloWorld>

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>


<style lang="less" scoped>
#app{
  display: flex;
  justify-content: space-around;
  flex-direction: row;

}
</style>
